<template>
	<div id="scoreDetail">
		<div class="breadcrumb">
			<img src="../../../../static/img/outClass_icon_1.png" class="head_img">
			<span class="title" @click="cancel()">成绩管理</span>
			<span>/ 成绩详情</span>
		</div>
		<div class="search">
			<span style="margin-left:20px;"> 姓名:{{userInfo.name}}</span>
			<span style="margin-left:20px;"> 性别:{{userInfo.gender}}</span>
			<span style="margin-left:20px;"> 学号:{{userInfo.campusId}}</span>
			<span style="margin-left:20px;"> 学校校区:{{userInfo.campusZoneName}}</span>
			<span style="margin-left:20px;"> 院系:{{userInfo.department}}</span>
			<span style="margin-left:20px;">学期目标公里:{{userInfo.semesterGoal}}（公里）</span>
		</div>
		<div class="list">
			<div class="list_head">
				<span>成绩详情</span>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<el-table :data="list">
				<el-table-column prop="index" label="序号" width="70">
				</el-table-column>
				<el-table-column prop="startTime" label="开始时间">
				</el-table-column>
				<el-table-column prop="endTime" label="结束时间">
				</el-table-column>
				<el-table-column prop="duration" label="运动时长">
				</el-table-column>
				<el-table-column prop="speed" label="配速">
				</el-table-column>
				<el-table-column prop="length" label="实际跑步公里数">
				</el-table-column>
				<el-table-column prop="validLength" label="有效公里数">
				</el-table-column>
				<el-table-column label="跑步模式">
					<template scope="scope">
						<span v-if="scope.row.runMode ==1">随机终点</span>
						<span v-if="scope.row.runMode ==2">操场跑</span>
						<span v-if="scope.row.runMode ==3">约定终点</span>
						<span v-if="scope.row.runMode ==4">自由跑</span>
					</template>
				</el-table-column>
				<el-table-column label="完成情况">
					<template scope="scope">
						<span v-if="scope.row.finished ==0" style="color:red;">未完成</span>
						<span v-if="scope.row.finished ==1">已完成</span>
					</template>
				</el-table-column>
				<el-table-column label="异常状态">
					<template scope="scope">
						<span v-if="scope.row.status ==1" style="color:red;">成绩异常</span>
						<span v-if="scope.row.status ==0">成绩正常</span>
						<span v-if="scope.row.status ==2" style="color:red;">成绩作弊</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				userInfo: {},
				uid: "",
				sid: "",
				startTime: "",
				endTime: "",
				currentPage: 1,
				totalCount: 0
			};
		},
		mounted() {
			this.uid = this.$util.getUrlParam("uid");
			this.sid = this.$util.getUrlParam("sid");
			this.endTime = this.$util.getUrlParam("endTime");
			this.startTime = this.$util.getUrlParam("startTime");
			this.getUserInfo();
			this.getDetail();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			search() {
				this.getDetail();
			},
			// 用户信息；
			getUserInfo() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/studentinfo";

				this.$http({
					url,
					method: "GET",
					params: {
						uid: this.uid,
						sid: this.sid
					}
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data.gender == 0) {
							response.data.data.gender = "女";
						} else {
							response.data.data.gender = "男";
						}
						response.data.data.semesterGoal = response.data.data.semesterGoal / 1000;
						this.userInfo = response.data.data;
					}
				});
			},
			//获取成绩列表
			getDetail() {
				this.list = [];
				let url = this.$util.domain + "/campusadminapi/v1/student/runlist";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						uid: parseInt(this.uid),
						endTime: parseInt(this.endTime),
						startTime: parseInt(this.startTime),
						pageNum: parseInt(this.currentPage)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let scoreList = response.data.data.recordList;
						this.totalCount = response.data.data.totalCount;
						if (scoreList && scoreList.length > 0) {
							for (let i = 0; i < scoreList.length; i++) {
								let $index = i + 1,
									$startTime = scoreList[i].startTime,
									$endTime = scoreList[i].endTime,
									$duration = scoreList[i].duration,
									$runMode = scoreList[i].runMode,
									$speed = scoreList[i].speed,
									$isComplete = scoreList[i].isComplete,
									$length = scoreList[i].length,
									$validLength = scoreList[i].validLength,
									$finished = scoreList[i].finished,
									$status = scoreList[i].status,
									$uid = scoreList[i].uid;

								let speed = $speed;
								let int = parseInt(speed);
								let float = speed - int;
								$speed = int + "'" + parseInt(float * 60) + '"';
								$duration = Math.ceil($duration / 60) + "min"; //转换分钟
								$length = ($length / 1000).toFixed(2) + "公里"; //转换公里
								$validLength = ($validLength / 1000).toFixed(2) + "公里"; //转换公里

								this.list.push({
									index: $index,
									speed: $speed,
									length: $length,
									status: $status,
									runMode: $runMode,
									duration: $duration,
									finished: $finished,
									isComplete: $isComplete,
									validLength: $validLength,
									endTime: new Date($endTime).format("yyyy/MM/dd hh:mm:ss"),
									startTime: new Date($startTime).format("yyyy/MM/dd hh:mm:ss")
								});
							}
						}
					}
				});
			},
			//获取数据条数
			getTotalNum() {
				let url = this.$util.domain + "/campusadminapi/v1/student/totalCount";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						condition: this.condition,
						cid: parseInt(this.course),
						mid: parseInt(this.teacher),
						sid: parseInt(this.semester)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.totalCount = response.data.data;
					}
				});
			},
			//返回
			cancel() {
				let sid = this.$util.getUrlParam("sid");
				let mid = this.$util.getUrlParam("mid");
				let cid = this.$util.getUrlParam("cid");
				let pageNum = this.$util.getUrlParam("pageNum");
				let condition = this.$util.getUrlParam("condition");
				let params = { sid, mid, pageNum, condition };

				this.$util.refreshTo("/#/scoreManage", params);
			},
			//请求分页数据分页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDetail();
			}
		}
	};
</script>

<style scoped>
	#scoreDetail {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	.title {
		color: #0398ff;
	}

	.infoHead {
		width: 100%;
		height: 36px;
		background-color: #f5f5f5;
		line-height: 36px;
		font-size: 12px;
		color: #333;
	}

	.search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 40px;
		line-height: 40px;
		overflow: hidden;
		padding: 0 25px;
		font-size: 14px;
		color: #666666;
	}

	.qizhiDate {
		width: 100%;
	}
</style>